<template>
	<view class="menus-box" >
		<view class="item" v-for="(item,index) in list" @click="clickItem(item.id)">
			<view class="menu-icon">
				<text class="icon-font icon-style">{{item.icon}}</text>
			</view>
			<view class="menu-txt">{{item.title}}</view>
		</view>
	</view>
</template>
<!-- v-show="showMenu" -->
<script>
	import lang from "../../js/conf/Lang.js";
	export default{
		props:["index"],
		data(){
			return{
				// showMenu:false,
				list:[
					// {title : lang.receiptMenu.editTxt, id : 1, icon : '\ue63c'},
					{title : lang.receiptMenu.copyTxt, id : 2, icon : '\ue62b'},
					{title : lang.receiptMenu.deleTxt, id : 3, icon : '\ue6ca'},
				],
			}
		},
		
		methods:{
			clickItem(id)
			{
				this.$emit("action",id,this.index);
			},
		},
	}
</script>

<style lang="scss">
	.menus-box
	{
	    position: absolute;
		right: 0px;
		top :80px;
		// top: 52px;
		// left: 308px;
		
		width: 80px;
		background: #FFF;
		padding: 5px;
		color: #6D7184;
		font-size: 14px;
		border: 1px #ddd solid;
		border-radius: 3px;
		z-index: 999;
		.item
		{
			display: flex;
			width: 100%;
			cursor: pointer;
			.menu-icon
			{
				width: 20px;
				height: 20px;
				margin-left: 8px;
				margin-right: 4px;
				.icon-style
				{
					font-size: 18px;
				}
			}
			
			.menu-txt
			{
				margin: 4px;
			}
		}
		.item:hover {
			background:#F8F8F8;
			color: #3388ff;
		}
	}
	.menus-box:after
	{
		content: "";
		position: absolute;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 6px solid #fff;
		top: -6px;
		left: 41px;
	}
	.menus-box:before
	{
		content: "";
		position: absolute;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #ddd;
		top: -7px;
		left: 39px;
	}
</style>
